<template>
    <section id="app">
        <header id="header">
            <div class="header__date-wrapper">
                {{ date }}
            </div>
            <h1 class="header__title-wrapper">
                年会抽奖
            </h1>
            <div class="header__empty-wrapper">
                <img v-if="isFullscreen" @click="stopFullscreen" src="~@/assets/img/37.png" alt="" />
                <img v-else-if="!isFullscreen" @click="startFullscreen" src="~@/assets/img/36.png" alt="" />
            </div>
            <div class="header__user-wrapper">
                {{ $store.state.username }}
                <div class="header__downdrop-wrapper">
                    <z-triangle-wrapper shadow-size="sm">
                        <div class="header__downdrop-list">
                            <div class="header__downdrop-item" @click="onLogout">
                                <i class="el-icon-switch-button"></i>
                                <span class="header__downdrop-text">退出登录</span>
                            </div>
                        </div>
                        <div class="header__downdrop-list">
                            <div class="header__downdrop-item">
                                <i class="el-icon-edit"></i>
                                <span class="header__downdrop-text" @click="editPassword">修改密码</span>
                            </div>
                        </div>
                    </z-triangle-wrapper>
                </div>
            </div>
        </header>
        <section id="body">
            <!-- <aside> -->
            <menus id="aside" style="max-width:25rem;min-width:60px"></menus>
            <!-- </aside> -->
            <main id="main">
                <router-view></router-view>
            </main>
        </section>
    </section>
</template>

<script>
import { post } from "@/assets/js/http.js";
import menus from '@/components/z-nav-menu/index.vue'
// import z-triangle - wrapper from '@/components/z-triangle-wrapper/index.vue'
function pad(value) {
    return value < 10 ? "0" + value : value;
}

export default {
    name: "view-index",
    components: {
        menus,
        "z-triangle-wrapper": () => import('@/components/z-triangle-wrapper/index.vue')
    },
    data() {

        return {
            date: ""
        };
    },
    mounted() {
        // 监听全屏事件
        document.body.addEventListener(
            "fullscreenchange",
            this.onFullscreenChange
        );
        this.updateDate();
    },
    beforeDestroy() {
        // 移除全屏事件
        document.body.removeEventListener(
            "fullscreenchange",
            this.onFullscreenChange
        );
    },
    computed: {
        path() {
            return this.$route.path;
        },
        isFullscreen() {
            return this.$store.state.isFullscreen;
        }
    },
    methods: {

        onFullscreenChange() {
            this.$store.commit("toggleFullscreen", document.fullscreen);
        },
        startFullscreen() {
            try {
                document.body.requestFullscreen();
            } catch (err) {
                this.$message.error("切换全屏失败");
            }
        },
        stopFullscreen() {
            document.exitFullscreen();
        },
        updateDate() {
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const h = date.getHours();
            const m = date.getMinutes();
            const s = date.getSeconds();
            this.date = `${year}-${pad(month)}-${pad(day)} ${pad(h)}:${pad(
                m
            )}:${pad(s)}`;
            setTimeout(() => {
                this.updateDate();
            }, 1000);
        },
        onLogout() {
            this.$confirm("确认退出登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "default"
            }).then(async () => {
                await post({
                    url: "/admin/index/logout",
                    data: {},
                    loading: true
                });
                this.$message.success("退出登录成功");
                this.$store.commit("logout");
                this.$router.replace("/login");
            })
                .catch(() => { });
        },
        editPassword() {
            this.$prompt('请输入输入新密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+{};:,<.>/?]).{10,32}$/,

                inputErrorMessage: '密码格式不正确'
            }).then(({ value }) => {
                post({
                    url: "/admin/index/edit_pass",
                    data: {
                        password: value
                    }
                }).then(async () => {
                    await post({
                        url: "/admin/index/logout",
                        data: {},
                        loading: true
                    });
                    this.$message.success("修改密码成功，请重新登录");
                    this.$store.commit("logout");
                    this.$router.replace("/login");
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }
    }
};
</script>
